<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form label-width="160px" style="margin: 20px 50px 20px 0px;" size="mini">
        <el-row type="flex" class="list-items">
          <el-col :span="8">
            <el-form-item label="文档映射字段:">
              <el-input v-model="table.conf_table.field_mapping" class="venus-input-middle" placeholder="" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="数据库值字段:">
              <el-input v-model="table.conf_table.field_code" class="venus-input-middle" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="venus-btn-box" style="text-align: center;">
            <el-button type="success" @click="search">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
            <el-button type="success" @click="addBean">新增</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination :table-data="table.conf_table.tableData" :table-header-config="table.tableHeaderConfig"
        highlight-current-row :total="table.conf_table.total" :page-size="table.conf_table.limit" :now-page="table.conf_table.nowPage"
        :operation-config="table.operationConfig" @current-change="handleCurrentChange" />
    </div>

    <!-- 新增产品文档模态框 -->
    <el-dialog :title="form.add_form.title" :visible.sync="form.add_form.dialogFormVisible" v-dialogDrag>
      <el-form :model="form.conf_form" size="mini" :rules="form.rules" ref="addForm">
        <el-input type="hidden" v-model="form.conf_form.id" />
        <el-row type="flex">
          <el-col>
            <el-form-item label="文档字段映射" :label-width="style.formLabelWidth" prop="field_mapping">
              <el-input v-model="form.conf_form.field_mapping" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="数据库值字段" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.field_code" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="字段描述" :label-width="style.formLabelWidth" prop="field_desc">
              <el-input v-model="form.conf_form.field_desc" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="所属表" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.table_info" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="查询条件" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.query_condition" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="映射字典" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.dict" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="数据类型" :label-width="style.formLabelWidth">
              <el-select v-model="form.conf_form.data_type" placeholder="请选择" @change="dataTypeChange">
                <el-option v-for="(value,key,index) in dict.dataType" :key="index" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="计算表达式" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.expression" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="数据格式" :label-width="style.formLabelWidth" v-show="form.dataFmtDisplay">
              <el-select v-model="form.conf_form.data_fmt" placeholder="请选择">
                <el-option v-for="item in dict.dataFmt" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="小数位:" :label-width="style.formLabelWidth" v-show="form.digitsDisplay">
              <el-input v-model="form.conf_form.data_digits" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" @click="addOk('addForm')">提交</el-button>
        <el-button type="info" @click="form.add_form.dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改产品文档模态框 -->
    <el-dialog :title="form.edit_form.title" :visible.sync="form.edit_form.dialogFormVisible" v-dialogDrag>
      <el-form :model="form.conf_form" size="mini" :rules="form.rules" ref="editForm">
        <el-input type="hidden" v-model="form.conf_form.id" />
        <el-row type="flex">
          <el-col>
            <el-form-item label="文档字段映射" :label-width="style.formLabelWidth" prop="field_mapping">
              <el-input v-model="form.conf_form.field_mapping" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="数据库值字段" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.field_code" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="字段描述" :label-width="style.formLabelWidth" prop="field_desc">
              <el-input v-model="form.conf_form.field_desc" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="所属表" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.table_info" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="查询条件" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.query_condition" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="映射字典" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.dict" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="数据类型" :label-width="style.formLabelWidth">
              <el-select v-model="form.conf_form.data_type" placeholder="请选择" @change="dataTypeChange">
                <el-option v-for="(value,key,index) in dict.dataType" :key="index" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="计算表达式" :label-width="style.formLabelWidth">
              <el-input v-model="form.conf_form.expression" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col>
            <el-form-item label="数据格式" :label-width="style.formLabelWidth" v-show="form.dataFmtDisplay">
              <el-select v-model="form.conf_form.data_fmt" placeholder="请选择">
                <el-option v-for="item in dict.dataFmt" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="小数位:" :label-width="style.formLabelWidth" v-show="form.digitsDisplay">
              <el-input v-model="form.conf_form.data_digits" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="success" @click="editOk('editForm')">提交</el-button>
        <el-button type="info" @click="form.edit_form.dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* 自定义数据加载 */
  import request from '@/utils/request'
  import * as kk from '@/utils/k-utils'
  import '@/utils/directives'
  export default {
    name: 'BondInfo',
    data() {
      return {
        dict: {
          dataType: [],
          dataFmt: []
        },
        table: {
          tableHeaderConfig: [ // 表头配置
            {
              prop: 'field_mapping',
              label: '文档映射字段'
            },
            {
              prop: 'field_code',
              label: '数据库值字段'
            },
            {
              prop: 'field_desc',
              label: '字段描述'
            },
            {
              prop: 'table_info',
              label: '所属表'
            },
            {
              prop: 'query_condition',
              label: '查询条件'
            },
            {
              prop: 'dict',
              label: '映射字典'
            },
            {
              prop: 'data_type',
              label: '数据类型'
            },
            {
              prop: 'data_fmt',
              label: '数据格式'
            },
            {
              prop: 'data_digits',
              label: '保留位数'
            },
            {
              prop: 'expression',
              label: '计算表单式'
            }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'left',
            width: 200,
            operationButton: [{
                value: '修改',
                func: this.myModify
              },
              {
                value: '删除',
                func: this.myDelete
              },
              {
                value: '详情',
                func: this.info
              }
            ]
          },
          conf_table: {
            limit: 5,
            total: 0,
            nowPage: 0,
            tableData: [], // 表格数据
            exeid: 'QUERYFIELDCONF',
            field_mapping: '',
            field_code: ''
          }
        },
        form: {
          dataFmtDisplay: false,
          digitsDisplay: false,
          add_form: {
            title: '新增产品文档配置信息',
            dialogFormVisible: false
          },
          edit_form: {
            title: '修改产品文档配置信息',
            dialogFormVisible: false
          },
          conf_form: {
            id: '',
            field_mapping: '',
            field_code: '',
            field_desc: '',
            table_info: '',
            query_condition: '',
            dict: '',
            data_type: '',
            expression: '',
            data_fmt: '',
            data_digits: ''
          },
          rules: {
            field_mapping: [{
              required: true,
              message: '该项不允许为空',
              trigger: 'blur'
            }],
            field_desc: [{
              required: true,
              message: '该项不允许为空',
              trigger: 'blur'
            }]
          }

        },
        style: {
          formLabelWidth: '130px'
        }



      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
        //初始化表格数据
        this.table.conf_table.nowPage = 1
        kk.k_load_table(this, 'conf_table', 'file')
      },
      search() { // 查询函数
        this.table.conf_table.nowPage = 1
        kk.k_load_table(this, 'conf_table', 'file')
      },
      myModify(item, index) {
        this.form.edit_form.dialogFormVisible = true
        kk.k_load_dict(this, 'dataType', 'file_field_type')
        this.copyObj(item, this.form.conf_form)
        this.dataTypeChange(item)

      },
      myDelete(item, index) {
        kk.k_update_exeid('file', 'DELETEFIELDCONF', item).then(rep => {
          this.form.add_form.dialogFormVisible = false
        })
      },
      resetForm() {
        this.table.conf_table.field_mapping = ''
        this.table.conf_table.field_code = ''
      },
      handleCurrentChange(val) {
        this.table.conf_table.nowPage = val
        kk.k_load_table(this, 'conf_table', 'file')
      },
      addBean() {
        this.copyObj({
            id: '',
            field_mapping: '',
            field_code: '',
            field_desc: '',
            table_info: '',
            query_condition: '',
            dict: '',
            data_type: '',
            expression: '',
            data_fmt: '',
            data_digits: ''}, this.form.conf_form)
            this.form.dataFmtDisplay =false
            this.form.digitsDisplay =false
        this.form.add_form.dialogFormVisible = true
        kk.k_load_dict(this, 'dataType', 'file_field_type')
      },
      addOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = this.convert_field_conf()
            //保存数据
            kk.k_update_exeid('file', 'NEWFIELDCONF', params).then(rep => {
              this.form.add_form.dialogFormVisible = false
            })
          }
        })
      },
      editOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             var params = this.convert_field_conf()
            //保存数据
            kk.k_update_exeid('file', 'UPDATEFIELDCONF', params).then(rep => {
              this.form.edit_form.dialogFormVisible = false
            })
          }
        })
      },
      convert_field_conf() {
        var params = this.form.conf_form
        var field_code = params.field_code,
          table_info = params.table_info,
          query_condition = params.query_condition,
          field_mapping = params.field_mapping,
          field_desc = params.field_desc,
          reg_field_mapping = new RegExp(/^[A-Za-z]+$/),
          reg_field_desc = new RegExp(/^[\u2E80-\u9FFF]+$/);
        params.field_code = field_code.replace(/{/g, "{{").replace(/}/g, "}}");
        params.table_info = table_info.replace(/{/g, "{{").replace(/}/g, "}}");
        params.query_condition = query_condition.replace(/{/g, "{{").replace(/}/g, "}}");
        //判断映射字段只能是英文,字段描述只能是中文
        if (!reg_field_mapping.test(field_mapping)) {
          this.$message.error('映射字段必须是英文')
          return false;
        }
        if (!reg_field_desc.test(field_desc)) {
          this.$message.error('字段描述必须是中文')
          return false;
        }
        return params
      },
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
      dataTypeChange(item) {
        if (!item) {
          this.form.conf_form.data_fmt = ''
          this.form.conf_form.data_digits = ''
        }
        var params = {}
        var data_type = this.form.conf_form.data_type
        if (parseInt(data_type) == 1) { //日期
          this.form.dataFmtDisplay = true
          this.form.digitsDisplay = false
          params.itemkey = '1,2,3'
        } else if (parseInt(data_type) == 2) { //金额
          this.form.dataFmtDisplay = true
          this.form.digitsDisplay = true
          params.itemkey = '4,5'
        } else if (parseInt(data_type) == 3) { //自然数
          this.form.dataFmtDisplay = true
          this.form.digitsDisplay = true
          params.itemkey = '5'
        } else {
          this.form.dataFmtDisplay = false
          this.form.digitsDisplay = false
          params.itemkey = ''
        }
        kk.k_load_exeid('file', 'QUERYDICT_DATAFORMAT', params).then(rep => {
          if (rep.rows.length > 0) {
            this.dict.dataFmt = rep.rows
          }
        })
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text;
    /*火狐*/
    -webkit-user-select: text;
    /*webkit浏览器*/
    -ms-user-select: text;
    /*IE10*/
    -khtml-user-select: text;
    /*早期浏览器*/
    user-select: text;
  }
</style>
